<template>
	<view class="content">
		<tui-navigation-bar :titleSize="18" :titleLineHeight="18" :titlefontWeight="800" :isOpacity="false"
			:splitLine="true" @init="initNavigation" title="详情" backgroundColor="#fff" color="#000">
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
			</view>
		</tui-navigation-bar>
		
		<view class="recommendDetails-content" :style="{ paddingTop: marginTop + 'px' }">
			<tui-list-cell :unlined="true" padding="26rpx 0">
				<view class="thorui-flex__between">
					<view >
						<image v-if="!dynamic.avatar"
							src="https://dn-coding-net-production-pp.codehub.cn/270e73de-2548-406b-9e1c-c0c8481dff90.png"
							class="u-nickname__img"></image>
						<image v-else :src="ossUrl+dynamic.avatar" class="u-nickname__img" ></image>
						<text class="tui-text">{{dynamic.nickname}}</text>
					</view>
					<view class="user-r">
						<!-- <view class="icon-guanzhu" @click="attentionUser" v-if="!isGuanzhu">
							<image src="/static/user/icon_add1@2x.png"></image>
							关注
						</view>
						<view class="icon-guanzhu" style="background-color:#9397a4;font-size: 28rpx;" @click="attentionUser" v-else>
							<tui-icon name="check" size="30rpx" color="#fff"></tui-icon>
							已关注
						</view> -->
						<!-- <image @click="sharePopup" class="icon-share" src="/static/user/icon_share@2x.png">
						</image> -->
					</view>
				</view>
			</tui-list-cell>
			
			<!-- 轮播图 -->
			<view class="tui-banner-swiper">
				<tutor-videoImg-swiper :ossUrl="ossUrl" :imgUrls="dynamic.releaseImgs"></tutor-videoImg-swiper>
				<!-- <swiper class="tui-banner__height" @change="bannerChange" circular :indicator-dots="false"
					:interval="4000" :duration="150">
					<block v-for="(item,index) in dynamic.releaseImgs" :key="index">
						<swiper-item>
							<view class="tui-swiper-item tui-banner__height">
								<image :src="ossUrl + [item]" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<tui-swiper-dot radius="50%" backgroundColor="#bfbfbf54" activeBgColor="#fff"
				 :count="slideCount" :current="slideCurrent"></tui-swiper-dot> -->
			</view>
			<tui-text padding="40rpx 0 24rpx" :text="dynamic.releaseContent" size="36"></tui-text>
			<!-- <tui-list-view marginTop="20rpx">
				<tui-text padding="44rpx 0 24rpx" :text="'评论（'+commentTotal+'）'" size="36" fontWeight="600"></tui-text>
				<view class="commentList">
					<z-paging ref="paging" :fixed="false" v-model="commentList" @query="queryList">
						<CommentItem :ossUrl="ossUrl" :dataList="commentList"></CommentItem>
					</z-paging>
				</view>
			</tui-list-view> -->
		</view>

		<!-- 输入评论 -->
		<!-- <view class="footer">
			<view class="footer_content">
				<tui-input v-model="pingjiaData" backgroundColor="#F5F5F5" color="#999999" size="32" :borderBottom="false"
					placeholder="请输入你的评价" :radius="24" @confirm="commentDynamic">
					<template v-slot:left>
						<view class="icon">
							<image class="iconimg" src="/static/user/icon_pinglun@2x.png"></image>
						</view>
					</template>
					<template v-slot:right>
						<tui-button :loaging="pushLoadging" @tap="sendPingj" width="100rpx" :size="28" height="48rpx" type="gray-primary"   shadow  >发送</tui-button>
					</template>
				</tui-input>
			</view>
			<tui-tag type="gray" size="35rpx" shape="circle" :plain="true" padding="0" border="unset"  @tap="likeTap"> 
				<tui-icon :name="like*1===1?'like':'like-fill'" :color="like*1===1?'':'#2FD7D3'" :size="35" unit="rpx" margin="0 14rpx 0 0"></tui-icon>
				<text :style="like*1===1?'':'color: #2FD7D3'">{{likeNum}}</text>
			</tui-tag> 
		</view> -->

		<!--底部分享弹窗-->
		<tui-bottom-popup backgroundColor="#f6f6f6" :zIndex="1002" :maskZIndex="1001" :show="popupShow"
			@close="sharePopup">
			<view class="tui-share">
				<view class="tui-share-title">分享</view>
				<view class="tui-share-top">
					<view v-for="(item,index) in shareList[0].share" :key="index">
						<button style="borderColor:#fff;backgroundColor:#fff;" open-type="share" @click="share(item.provider, item.scene)" class="tui-share-item">
							<view class="tui-share-icon" hover-class="tui-hover" :hover-stay-time="150">
								<image style="width: 100%;height: 100%;" :src="item.img"></image>
							</view>
							<view class="tui-share-text">{{item.name}}</view>
						</button>
					</view>
					<view class="tui-share-item" v-for="(item,index) in shareList[1].operate" :key="index"
						@tap="shareData(item)">
						<view class="tui-share-icon" hover-class="tui-hover" :hover-stay-time="150">
							<image style="width: 100%;height: 100%;" :src="item.img"></image>
						</view>
						<view class="tui-share-text">{{item.name}}</view>
					</view>
				</view>
				<!-- <view class="tui-share-bottom">
					<view class="tui-share-item" v-for="(item,index) in shareList[1].operate" :key="index"
						@tap="shareData(item)">
						<view class="tui-share-icon" hover-class="tui-hover" :hover-stay-time="150">
							<image style="width: 100%;height: 100%;" :src="item.img"></image>
						</view>
						<view class="tui-share-text">{{item.name}}</view>
					</view>
					<view class="tui-share-item"></view>
					<view class="tui-share-item"></view>
				</view> -->
				<tui-button shape="circle" type="gray" @tap="popupShow=false">取消</tui-button>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	import CommentItem from './compontents/commentItem.vue'
	import {getCommentList,attention,comment,collectDynamic} from "@/http/api/index/index.js"
	import {getDynamicDetails} from "@/http/api/dynamic/dynamic.js"
	import Cache from '@/utils/cache'
	export default {
		components: {
			CommentItem
		},
		data() {
			return {
				ossUrl: getApp().globalData.ossurl,// 图片前缀
				// 导航栏
				top: 0, //标题图标距离顶部距离
				marginTop: 0, // 页面内容距离顶部的距离
				pushLoadging:false,
				pingjiaData:'',//评价内容
				dynamic: {},// 动态信息
				dynamicId:null,
				slideCurrent: 0,// 轮播图
				slideCount: 0,
				isGuanzhu: false,// 是否关注
				like: 1,// 当前用户是否收藏
				likeNum: 0,// 收藏数量
				// 评论
				commentTotal: 0,
				commentList: [],
				// 分享弹窗
				popupShow: false,
				shareList: [{
					share: [
					// 	{
					// 	img: "../../../../static/user/share/icon_zhifubao@2x.png",
					// 	name: "发送给朋友",
					// 	provider: "sinaweibo",
					// 	scene: ""
					// }, {
					// 	img: "../../../../static/user/share/icon_weibo@2x.png",
					// 	name: "新浪微博",
					// 	provider: "sinaweibo",
					// 	scene: ""
					// }, 
					{
						img: "/static/user/share/icon_weixin@2x.png",
						name: "微信好友",
						provider: "weixin",
						scene: "WXSceneSession",
					},{
						img: "/static/user/share/icon_shenghuoquan@2x.png",
						name: "生活圈",
						provider: "weixin",
						scene: "WXSceneTimeline",
					}]
				}, {
					operate: [{
						img: "/static/user/share/icon_refresh@2x.png",
						name: "刷新"
					}, {
						img: "/static/user/share/icon_copy@2x.png",
						name: "复制链接"
					}]
				}]
			}
		},
		onLoad(options) {
			if (options.dynamicId) {
				this.dynamicId = options.dynamicId; 
				getDynamicDetails(options.dynamicId).then(res=>{
					if(res.code===200){
						this.dynamic=res.data
						this.like = res.data.isCollection
					    this.likeNum = res.data.quantity
						// 0关注，1未关注
						this.isGuanzhu = res.data.isAttention*1 === 1 ? false : true
						// 轮播图数量
						this.slideCount = res.data.releaseImgs&&res.data.releaseImgs.length || 0;
					}
				})
			}
		},
		methods: {
			// 导航栏
			initNavigation(e) {
				this.top = e.top;
				this.marginTop = e.height;
			},
			//取消收藏
			isCancelCollect(){
				let isCollect = this.dynamic.isCollection === '0' ? '收藏' : '取消该收藏'
				uni.showModal({
					title: "温馨提示",
					content:`确认${isCollect}吗?`,
					confirmText: "确认",
					showCancel:'取消',
					success: (res) => {
						if(res.confirm){
							this.collectDynamicFunc()
						}
					},
				});
			},
			// 收藏、取消收藏动态
			likeTap() {
				console.log(this.like,'this.like是否收藏')
				this.like = this.like*1 === 1  ? 0 : 1;  //1未收藏 
				if(this.like*1===0){
					this.likeNum=++this.likeNum
				}else{
					if(this.likeNum>0){
						this.likeNum=--this.likeNum
					}
				}
				this.setUpdateLikes()
			},
			setUpdateLikes(){
				console.log(this.like,'this.like是否收藏')
				collectDynamic({
					id: this.dynamic.id,
					userId: Cache.get("userId"),
					queryType: this.like*1===1?"2":"1" //queryType  1收藏，2取消
				}).then(res => {
					if (res.code != 200) {
						 this.$utils.toast(res.msg);
					}
				}).catch(res => {
					this.$utils.toast(res);
				})
			},
			// 收藏、取消收藏动态
			collectDynamicFunc(){
				let e=this.dynamic
				collectDynamic({
					id: e.id,
					userId: Cache.get("userId"),
					queryType: e.isCollection === '1' ? "1":"2" //queryType  1收藏，2取消
				}).then(res => {
					if (res.code == 200) {
						let text = e.isCollection ==='0' ? '收藏成功':'取消收藏成功'
					    this.$utils.toast(text);
					} else {
						this.$utils.toast(res.msg);
					}
				}) 
			},
			back() {
				uni.navigateBack({
							        delta: 1
							    });;
			},
			// 轮播图
			bannerChange: function(e) {
				this.slideCurrent = e.detail.current;
			},
			// 分享弹窗
			sharePopup: function() {
				this.popupShow = !this.popupShow 
			},
			shareData(item){
				if(item.name==='复制链接'){
					  const link = '#小程序://来啦体育/GqRXTg6UrEm5PZa'; // 要复制的链接
					      uni.setClipboardData({
					        data: link,
					        success: () => {
							  this.popupShow = false
					          uni.showToast({
					            title: '链接已复制',
					            icon: 'none'
					          });
					        },
					        fail: () => {
					          uni.showToast({
					            title: '复制失败',
					            icon: 'none'
					          });
					        }
					      });
				} else {
					this.reload(); // 刷新当前页面
					uni.showToast({
					  title: '刷新成功',
					  icon: 'none'
					});
					this.popupShow = false;
				}
			},
			// 页面重载
			reload() {
			  // 页面重载
			  const pages = getCurrentPages();
			  // 声明一个pages使用getCurrentPages方法
			  const curPage = pages[pages.length - 1];
			  curPage.onShow();
			  curPage.onReady();
			  // 执行刷新
			},
			// 用户主页
			toMyHome: function(dynamic) { 
				uni.navigateTo({
					url: '/pages/find/modules/myDynamic/myDynamic?id='+ dynamic.userId
				})
			},
			// 评论列表
			queryList(pageNo, pageSize) {
				const params = {
					pageNum: pageNo,
					pageSize: pageSize,
					dynamicId: this.dynamicId,
					commentType: "1"
				}
				getCommentList(params).then(res => {
					if (res.code == 200) {
						this.commentTotal = res.total;
						this.$refs.paging.complete(res.rows);
					} else {
						this.$utils.toast(res.msg)
					}
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			// 关注用户
			attentionUser(){
				this.isGuanzhu = !this.isGuanzhu;
				let type = this.isGuanzhu ? '0':'1';// 0，关注，1，取消
				attention({
					id: this.dynamic.userId,
					type: type
				}).then(res => {
					if (res.code != 200) {
						 this.$utils.toast(res.msg);
					}
				}).catch(res => {
					this.$utils.toast(res);
				})
			},
			sendPingj(){
				this.pushLoadging=true
				comment({
					commentType: '1',
					dynamicId: this.dynamic.id,
					content: this.pingjiaData,
					userId: Cache.get("userId")
				}).then(res => {
					if (res.code == 200) {
						 this.pingjiaData=''
						 this.$utils.toast("评论已发布");
						 this.$refs.paging.reload();
					}
				}).catch(res => {
					this.pushLoadging=false
					this.$utils.toast(res);
				})
				.finally(()=>{
					this.pushLoadging=false
				}) 
			},
			// 评论动态
			commentDynamic(e){
				comment({
					commentType: '1',
					dynamicId: this.dynamic.id,
					content: e.detail.value,
					userId: Cache.get("userId")
				}).then(res => {
					if (res.code == 200) {
						 this.pingjiaData=''
						 this.$utils.toast("评论已发布");
						 this.$refs.paging.reload();
					}
				}).catch(res => {
					this.$utils.toast(res);
				})
			},
			// 分享
			share(provider, scene){
				if(scene==='WXSceneTimeline'){
					this.getApp().globalData.globalShare(true)
				}else if(scene==='WXSceneSession'){
					this.getApp().globalData.globalShare(false) 
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import './recommendDetails.scss';
</style>
<style scoped>
	page {
		background-color: #fff !important;
		overflow-y: hidden;
	}
	.content{
		/* padding-bottom: 200rpx; */
	}
	.recommendDetails-content {
		width: 94%;
		margin: 0px auto;
	}

	.tui-header-icon {
		width: 97%;
		position: fixed;
		top: 0;
		padding: 0 0 0 3%;
		display: flex;
		align-items: center;
		height: 32px;
		transform: translateZ(0);
		box-sizing: border-box;
	}

	/* 用户信息 */
	.u-nickname__img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-right: 20rpx;
		vertical-align: middle;
	}

	.tui-text {
		font-size: 30rpx;
		font-weight: 600;
	}

	.user-r {
		display: flex;
		align-items: center;
	}

	.user-r .icon-guanzhu {
		background-color: #2FD7D3;
		color: #fff;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		width: 150rpx;
		justify-content: center;
		font-size: 30rpx;
		padding: 13rpx 0;
		margin-right: 10rpx;
	}

	.user-r .icon-guanzhu image {
		width: 30rpx;
		height: 30rpx;
	}

	.user-r .icon-share {
		width: 50rpx;
		height: 50rpx;
	}

	/** 轮播图 */
	.tui-banner-swiper {
		position: relative;
	}

	.tui-banner__height {
		height: 360rpx;
	}

	.tui-swiper-item {
		width: 100%;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 600;
	}

	.tui-swiper-item image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
	
	.commentList{
		position: relative;
		height: 500rpx;
		z-index: 3;
	}

	/* 分享弹窗 */
	.tui-share {
		background: #fff;
		position: relative;
		width: 96%;
		padding: 0 2%;
	}

	.tui-share-title {
		color: #000;
		text-align: center;
		line-height: 26rpx;
		padding: 46rpx 0 50rpx 0;
		font-size: 38rpx;
		font-weight: 600;
	}

	.tui-share-top,
	.tui-share-bottom {
		display: flex;
		justify-content: space-between;
	}

	.tui-share-bottom {
		margin: 40rpx 0px 30rpx 0;
	}

	.tui-share-item {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 126rpx;
	}

	.tui-share-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fafafa;
		height: 126rpx;
		width: 126rpx;
		border-radius: 32rpx;
	}

	.tui-share-text {
		font-size: 24rpx;
		color: #7E7E7E;
		line-height: 24rpx;
		padding: 20rpx 0;
		white-space: nowrap;
	}

	.tui-hover {
		background: rgba(0, 0, 0, 0.2)
	}
</style>